<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置点位</title>
    <link rel="stylesheet" href="/backend/plugins/element-ui/index.css">
    <style>
        body {
            margin: auto;
            background-color: #030212;
        }
        .el-header{
            background-image: url('/backend/images/TopImg.png'); /* 替换为你的图片路径 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
            background-repeat: no-repeat; /* 背景图片不重复 */
        }
        .devices {
            box-sizing: border-box;
            border: 1px solid #85836b;
            border-radius: 3px;
            display: flex;
        }
        .main {
            min-height: 85vh;
            display: flex;
        }
        .statistics {
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中，如需 */
        }
        .pic{
            margin-top: 1px;
            margin-left: 1px;
            position: absolute;
        }
        .position{
            position: absolute;
            align-items : center ;
            z-index: 10;
            /* 垂直并排居中显示 */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .channelTypeMiss{
            background-color: #7b8a76;
            border-radius: 3px;
            height: 25px;
            width: 25px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container style="height: 100vh; text-align: center;">
            <el-header height="8vh" style="display: flex;justify-content: center;align-items: center;">
                <div class="title" style="display: flex;justify-content: center;align-items: center;">
                    <div style="height: 8vh;">
                        <img :src="logoPath" style="height: 8vh;">
                    </div>
                    <div>
                        <strong style="color: aliceblue; font-size: 4vh;">{{line}}终端位置设置</strong>
                    </div>
                </div>
            </el-header>
            <el-main>
                <el-row>
                    <el-col :span="16">
                        <div class="main devices" id="main">
                            <img v-for="(item , index) in imgList" :id="item.id" :src="item.src" class="pic"
                                 :style="item.style"/>
                            <span v-for="(item , index) in positionList" :style="item.style" v-if="item.enabled"
                                  :id="item.id" class="position" v-drag draggable="true">
                                <span style="color: aliceblue;font-size: 10px;">详情</span>
                                <span>
                                    <img :src="getChannelImg(item.channelType)" class="channelTypeMiss">
                                </span>
                                <span style="color: aliceblue;font-size: 10px;">{{item.positionName}}</span>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="main statistics" style="text-align: center;">
                            <el-row>
                                <el-col :span="24">
                                    <label style="color: aliceblue;">生产线:</label>
                                    <el-select v-model="line" placeholder="请选择" size="small" @change="handleSelect">
                                        <el-option
                                                v-for="item in lines"
                                                :key="item.lineName"
                                                :label="item.lineName"
                                                :value="item.lineName">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="24" style="margin-top: 2vh;">
                                    <el-button type="success" plain size="large" icon="el-icon-check" @click="savePosition" >保存</el-button>
                                    <el-button type="warning" plain size="large" icon="el-icon-setting" @click="gotoSetModule()">设置模型</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
    <script src="/backend/plugins/vue/vue.js"></script>
    <script src="/backend/plugins/axios/axios.js"></script>
    <script src="/backend/js/getParam.js"></script>
    <script src="/backend/plugins/element-ui/index.js"></script>
    <script>
        Vue.directive('drag', (el) => {
            const oDiv = el // 当前元素
            oDiv.onmousedown = (e) => {
                let target = oDiv
                while (
                    window.getComputedStyle(target).position !== 'absolute' &&
                    target !== document.body
                    ) {
                    target = target.parentElement
                }
                let parent = target.parentNode
                document.onselectstart = () => {
                    return false
                }
                if (!target.getAttribute('init_x')) {
                    target.setAttribute('init_x', target.offsetLeft)
                    target.setAttribute('init_y', target.offsetTop)
                }
                // e.clientX, e.clientY是鼠标点击的位置
                // target.offsetLeft, target.offsetTop是当前元素左上角的位置
                // 计算鼠标按下的位置距离当前元素左上角的距离
                const disX = e.clientX - target.offsetLeft
                const disY = e.clientY - target.offsetTop
                // target.clientWidth, target.clientHeight是当前元素的尺寸
                // parent.clientWidth, parent.clientHeight是父元素的尺寸
                // parent.offsetLeft, parent.offsetTop是父元素左上角的位置
                // 可移动范围的位置
                const minX = parent.offsetLeft+2
                const maxX = parent.offsetLeft + parent.clientWidth - target.clientWidth-2
                const minY = parent.offsetTop+2
                const maxY = parent.offsetTop + parent.clientHeight - target.clientHeight-2
                document.onmousemove = (e) => {
                    // 通过事件委托，计算移动的距离,e是最新的鼠标位置，disX、disY是鼠标刚点击时的位置
                    let l = e.clientX - disX
                    let t = e.clientY - disY
                    // 约束移动范围在父元素区域内
                    if (l < minX) {
                        l = minX
                    } else if (l > maxX) {
                        l = maxX
                    }
                    if (t < minY) {
                        t = minY
                    } else if (t > maxY) {
                        t = maxY
                    }
                    // 给当前元素样式中的left和top赋值
                    target.style.left = l + 'px'
                    target.style.top = t + 'px'
                }
                document.onmouseup = (e) => {
                    document.onmousemove = null
                    document.onmouseup = null
                    document.onselectstart = null
                }
                // 不return false的话，可能导致鼠标黏连，鼠标粘在dom上拿不下来，相当于onmouseup失效
                return false
            }
        });
        var vue = new Vue({
            el: '#app',
            data: {
                imgList: [],
                lines: [],
                line: null,
                positionList : [],
                logoPath: null
            },
            created() {
                axios.get("/line/listAll").then((res) => {
                    this.lines = res.data.data;
                });
                let queryParam = getQueryParam("line");
                if (queryParam !== null && queryParam !== '') {
                    this.line = queryParam;
                }
                axios.get("/line/getLogoPath").then((res) => {
                    this.logoPath = res.data;
                });
                if (this.line !== null && this.line !== '') {
                    axios.get("/line/getModule?lineName=" + this.line).then((res) => {
                        if (res.data.code === 0) {
                            this.imgList = res.data.data;
                        }
                    });
                    axios.get("/line/getPositions?lineName=" + this.line ).then((res) => {
                        if (res.data.code === 0) {
                            this.positionList = res.data.data;
                        }
                    });
                }else {
                    this.$message.error("您还未选择任何要设置的生产线！！");
                }
            },
            methods: {
                getChannelImg(channelTypeName){
                    if (channelTypeName === 'ESD手环') {
                        return "/backend/images/SVG/WH0.svg";
                    } else if (channelTypeName === '设备接地') {
                        return "/backend/images/SVG/EM0.svg";
                    } else if (channelTypeName === '台垫接地') {
                        return "/backend/images/SVG/RR0.svg";
                    } else if (channelTypeName === '离子风扇'){
                        return "/backend/images/SVG/EN0.svg";
                    }else if (channelTypeName === '温度计'){
                        return "/backend/images/SVG/TE1.svg";
                    }else if (channelTypeName === '湿度计'){
                        return "/backend/images/SVG/HU0.svg";
                    }else if (channelTypeName === '尘埃粒子'){
                        return "/backend/images/SVG/CL1.svg";
                    }
                },
                handleSelect(value){
                    window.location.href = "/backend/page/line/setPositions.html?line=" + value;
                },
                savePosition(){
                    const dom = document.getElementById("main");
                    console.log(dom);
                    axios.post("/line/savePositions", {
                        lineName: this.line,
                        dom: dom.outerHTML // 模型的标签 html
                    }).then((res) => {
                        if (res.data.code === 0) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                        }
                    });
                },
                gotoSetModule(){
                    window.location.href = "/backend/page/line/setModule.html?line=" + this.line;
                }
            }

        });
    </script>
</body>
</html>